import React from 'react'
import { AlertHtmlWrapper, AlertWrapper, AlertTitleWrapper, AlertItemWrapper, AlertFooterWrapper } from './styleAlert';
import { func, array, bool, string } from "prop-types"

const Alert = ({
    data,
    alertState,
    onClick,
    title,
    footer,
}) => {
    return (
        <AlertHtmlWrapper alertState={alertState}>
            <AlertWrapper>
                <AlertTitleWrapper
                    border={true}
                    borderWidth={"0 0 1px 0"}
                >{title}</AlertTitleWrapper>
                {
                    data.map((item) => {
                        return (
                            <AlertItemWrapper
                                border={true}
                                borderWidth={"0 0 1px 0"}
                                key={item}
                                onClick={onClick}
                            >{item}</AlertItemWrapper>
                        )
                    })
                }
                <AlertFooterWrapper onClick={onClick}>{footer}</AlertFooterWrapper>
            </AlertWrapper>
        </AlertHtmlWrapper>

    );
}

Alert.propTypes = {
    data: array,
    alertState: bool,
    onClick: func,
    title: string,
    footer: string,
}

export default Alert;